<template>
	<view>
		<view class="tab flex padding text-center">
			<view 
				v-for="(item,index) in cateArr" 
				:key="item.objectId" 
				:class="{'u-border-right':index<3}"
				@click="handleTab(item.objectId)"
			>
				{{item.catename}}
			</view>
		</view>
		<view class="padding-sm flex flex-wrap">
			<CakeItem v-for="item in cakelist" :key="item.objectId" :gdata="item" />
		</view>
	</view>
</template>

<script>
	import CakeItem from '@/components/cake-item.vue'
	import {
		ID,
		KEY
	} from '@/config/index.js'
	import {
		cakeGet,
		cateGet
	} from '@/api/cake.js'
	export default {
		components: {
			CakeItem
		},
		data() {
			return {
				cakelist: [],
				cateArr: [],
				cateid:'62e08e78590c0f6b5b775efb', //记录分类id
				page:1
			}
		},
		onLoad() { //页面中建议使用这一套生命周期
			//渲染商品列表
			cakeGet(this.cateid,this.page).then(res => {
				this.cakelist = res.data.results
				this.page++
			})
			//渲染分类
			cateGet().then(res => {
				this.cateArr = res.data.results
			})
		},
		onReachBottom() {
			console.log('触底了');
			cakeGet(this.cateid,this.page).then(res => {
				let {results} = res.data
				if(results.length){
					this.cakelist = [
						...this.cakelist,
						...results
					]
					this.page++
					return
				}
				uni.showToast({
					title:'没有更多了',
					icon:'none'
				})
				
			})
		},
		methods: {
			handleTab(id) {
				cakeGet(id).then(res => {
					this.cakelist = res.data.results
				})
			}
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.tab {
		view {
			width: 25%;
		}
	}

	.cake-item {
		width: 350upx;
		// background-color: orange;
		margin-right: 10upx;
		margin-bottom: 10upx;

		&:nth-of-type(2n) {
			margin-right: 0;
		}

		image {
			height: 350upx;
			width: 100%;
		}
	}
</style>
